<template>
  <div>
    <div style="margin: 0;  text-align: center;" class="mycard">
      <span class="words">修改个人信息</span>
      <el-form style="margin-top:4%; " :model="updateForm" ref="FormRef" :rules="rules" label-width="40%">
        <el-form-item label="名称" prop="username">
          <el-col :span="10">
            <el-input v-model="updateForm.username"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="QQ" prop="qq">
          <el-col :span="10">
            <el-input v-model="updateForm.qq"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item prop="email" label="邮箱">
          <el-col :span="10">
            <el-input v-model="updateForm.email"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item prop="nick" label="昵称">
          <el-col :span="10">
            <el-input v-model="updateForm.nick"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item prop="tel" label="电话号码">
          <el-col :span="10">
            <el-input v-model="updateForm.tel"></el-input>
          </el-col>
        </el-form-item>

        <el-form-item>
        </el-form-item>
        <el-button type="primary" @click="submitForm()">立即修改</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "HomeSelf",
  components: {},
  data() {
    return {
      updateForm: {
        username: '',
        qq: '',
        email: '',
        nick: '',
        tel: ''
      },
      // Form:[], 
      rules: {
        username: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        qq: [
          { required: true, message: '请填写qq', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写邮箱', trigger: 'blur' }
        ],
        nick: [
          { required: true, message: '请填写昵称', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请填写电话', trigger: 'blur' }
        ]

      }
    };

  },

  created() {
    this.getForm();
    // this.submitForm();
  },
  methods: {

    resetForm() {
      this.$refs.FormRef.resetFields();
    },

    async getForm() {
      const userid = window.sessionStorage.getItem("userid");
      const res = await this.$http.get("music/findUserByUserid", { params: { userid: userid } });
      this.updateForm = res.data.data;

    },
    submitForm() {
      this.$refs.FormRef.validate(async (valid) => {
        if (!valid) return;
        // const userid=window.sessionStorage.getItem("userid");
        // console.log(userid);
        // console.log(valid);t
        console.log(this.updateForm.username);
        let param = new URLSearchParams()
        param.append('userid', window.sessionStorage.getItem("userid"))
        param.append('username', this.updateForm.username)
        param.append('qq', this.updateForm.qq)
        param.append('email', this.updateForm.email)
        param.append('nick', this.updateForm.nick)
        param.append('tel', this.updateForm.tel)
        const res = await this.$http.post("music/updateUserBean", param);
        console.log(res);



        if (res.data.status) return this.$message.error(res.data.msg);
        this.$data.loading = true;
        this.$message.success(res.data.msg);
        // 保存用户信息
        console.log(res.data.data);


      });
    }
    // submitForm() {
    /* json格式提交： */
    // let formData = JSON.stringify(this.formMess);

    /* formData格式提交： */
    //     let formData = new FormData();
    //     for(var key in this.form[key]){
    //       form.append(key,this.form[key]);
    //     }

    //       axios({
    //     method:"post",
    //     url:"music/updateUserBean",
    //     headers: {
    // 	  "Content-Type": "http://127.0.0.1:8090"
    //     },
    //     withCredentials:true,
    //     data:formData
    // }).then((res)=>{
    //           console.log(res);
    //       });
    //   }
  }

}
</script>
<style scoped>
.mycard {
  padding-top: 20px;
  padding-bottom: 10px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);

}

</style>